<script setup lang="ts">
import { OrderType } from "@/types/consultTypes/consultTypes.ts";

defineProps<{
   status?: OrderType,
   countdown?: number
}>();
</script>

<template>
   <div class="room-status">
      <NavBar title="医生问诊室" left-text="返回" @click-left="$router.push('/')"></NavBar>
      <div class="wait" v-if="status===OrderType.ConsultWait">已通知医生尽快接诊，24小时内医生未回复将自动退款</div>

      <div class="chat" v-if="status===OrderType.ConsultChat">
         <span>咨询中</span>
         <span>剩余时间:<van-count-down :time="countdown!*1000"></van-count-down></span>
      </div>

      <div class="end" v-if="status===OrderType.ConsultComplete||status===OrderType.ConsultCancel">
         <van-icon name="passed" />
         <span>已结束</span>
      </div>
   </div>
</template>

<style scoped lang="scss">
.room-status {
   position: sticky;
   left: 0;
   top: 0;
   height: 44px;
   width: 100%;
   background-color: #fff;
   font-size: 13px;
   z-index: 1;

   .wait {
      padding: 0 15px;
      background-color: var(--cp-plain);
      height: 100%;
      line-height: 44px;
      text-align: center;
      color: var(--cp-primary);
   }

   .chat {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      background-color: #ffffff;

      span {
         &:first-child {
            color: var(--cp-primary);
         }

         &:last-child {
            color: var(--cp-text2);
            width: 130px;

            .van-count-down {
               display: inline;
            }
         }
      }
   }

   .end {
      display: flex;
      align-items: center;
      height: 44px;
      padding: 0 15px;
      font-weight: 500;
      background-color: #ffffff;

      .van-icon {
         font-size: 14px;
         margin-right: 4px;
         position: relative;
         top: 1px;
      }
      span{
         font-size: 14px;
      }
   }
}
</style>
